<template>
  <div id="blogcontext">
    <el-divider></el-divider>
    <!-- 轮播 -->
    <el-carousel
      :interval="4000"
      indicator-position="outside"
      type="card"
      height="200px"
    >
      <el-carousel-item v-for="item in imagesBox" :key="item.id">
        <img :src="item.idView" class="image" />
      </el-carousel-item>
    </el-carousel>
    <el-divider></el-divider>
    <!-- blog -->
    <div id="blogbody">
      <el-row :gutter="20" >
        <el-col :span="16"
          ><div class="grid-content bg-purple">
           	<div  v-for="(blog,index) in blogs">
				<div class="blogfor">
						<!-- 标题 -->
					<div style="text-align:center;">
						<el-link :underline="false" v-on:click="onSubmit(blog)">
							<h2>{{ blog.title }}</h2>
						</el-link>
					</div>
					<!-- 标签 -->
					<div id="tag">
						<div class="createtime">{{blog.createTime}}</div>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<div class="tagname" v-for="tag in blog.tagName">
							·<span  class="tagname" >{{tag}}</span>&nbsp;&nbsp;&nbsp;
						</div>
					</div>
					<!-- <el-divider></el-divider> -->
					<hr style="height:1px;border:none;border-top:1px solid rgb(220 223 230);" />
					<!-- 概述 -->
					<mavon-editor
						:toolbarsFlag="false"
						:subfield="false"
						defaultOpen="preview"
						:toolbars="markdownOption"
						v-model="blog.descp"
						style="border-radius: 8px;height: 40px;"
					/>
					<div style="height: 4px"></div>
					<!-- 脚部  -->
					<!-- 收藏、点赞 -->
					<el-row>
					<el-col :span="23"
						><div class="grid-content bg-purple">
						<div class="blog-footer">
							<!-- 点赞 -->
							<i class="el-icon-thumb"></i>
							<span
							style="font-size: smaller; display: inline-block"
							>{{ blog.likenum }}</span
							>
							<!-- 收藏 -->
							<i ref="off" class="el-icon-star-off" @click="change1(index)" style="display: inline-block"></i>
							<i ref="on" class="el-icon-star-on" @click="change2(index)" style="display: none"></i>

							<!-- 分享 -->
							<i class="el-icon-share"></i>
						</div>
						</div></el-col
					>
					<el-col :span="1"
						><div class="grid-content bg-purple-light"></div
					></el-col>
					</el-row>
					
				</div>
				<!-- <el-divider></el-divider> -->
				<br/>
            </div>
			<!-- 分页 -->
            <nav style="text-align: center" v-if="this.code == 0">
              <!-- <span class="demonstration">完整功能</span> -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </nav>
			<el-divider></el-divider>
			</div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple">
			<!-- 搜索框 -->
			<div style="margin: 15px 0;">
				<el-input placeholder="标题" v-model="search" class="input-with-select">
					<el-button @click="OnSearch()" slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</div>
            <!-- 用户信息 -->
            <div class="userMessage" v-if="loginUser!=''">
				<div style="text-align: center">公告</div>
              	<el-divider style="margin: 10px 5px"></el-divider>
				<div style="margin: 5px 30px;">
					<div style="text-align:center;">
						<el-avatar :size="60" :src="userMessage.imgurl==''?circleUrl:userMessage.imgurl"></el-avatar>
					</div>
					<div style="margin: 8px 0;">
						<span>昵称：&nbsp;</span> <span style="color: #95c4fd;">{{userMessage.username}}</span>
					</div>
					<div style="margin: 8px 0;">
						<span>邮箱：&nbsp;</span> <span style="color: #95c4fd;">{{userMessage.email}}</span>
					</div>
					<div style="margin: 8px 0;">
						<span>性别：&nbsp;</span> <span style="color: #95c4fd;">{{userMessage.gender}}</span>
					</div>
					<div style="margin: 8px 0;">
						<span>号码：&nbsp;</span> <span style="color: #95c4fd;">{{userMessage.phone}}</span>
					</div>
					<div style="margin: 8px 0;">
						<span>个签：&nbsp;</span> <span style="color: #95c4fd;">{{userMessage.intro}}</span>
					</div>
					<div style="text-align:right;">
						<el-button @click="Setting()" size="mini">
							编辑<i class="el-icon-edit"></i>
						</el-button>
						
					</div>
				</div>
				
			</div>
			<el-divider></el-divider>
			<!-- 日历控件 -->
			<el-calendar v-model="value" id="calendar">
				<template
					slot="dateCell"
					slot-scope="{data}">
					<div v-for="blog in blogs"><div v-if="blog.updateTime == data.day" style="display:none">{{++count}}</div></div>
					<div v-if="count">
						<el-badge is-dot :value=count :max="99" class="item">
							<div :class="data.isSelected ? 'is-selected' : ''" @click="OnCalendar(data.day)">
							{{ data.day.split('-').slice(2).join('') }}
							</div>
						</el-badge>
					</div>
					<div v-else>
						<div :class="data.isSelected ? 'is-selected' : ''">
						{{ data.day.split('-').slice(2).join('') }}
						</div>
					</div>
					<div style="display:none">{{count = 0}}</div>
				</template>
			</el-calendar>
            <div style="height: 20px"></div>
			<el-divider></el-divider>
            <!-- 侧边 标签 -->
            <div class="tag">
              <div style="text-align: center">标签栏</div>
              <el-divider style="margin: auto 5px"></el-divider>

              <el-row>
                <el-col :span="24"
                  ><div
                    class="grid-content bg-purple-dark"
                    style="text-align: center"
                  >
                    <nav
                      style="padding: 10px; display: inline-block"
                      v-for="tag in tags"
                    >
                      <el-button plain type="info" @click="OnTag(tag.name)">{{ tag.name }}</el-button>
                    </nav>
                  </div></el-col
                >
              </el-row>
            </div>
			<el-divider></el-divider>
			<!-- 最新评论 -->
			<div v-if="loginUser!=''">
				<div style="background-color: #c3e2ff;border-radius: 3px;">
					<div class="commentHeader">最新评论</div>
				</div>
				<div class="latestComments">
					<div v-for="(data,index) in latestComments">
						<el-link @click="onSubmit(data.blog)">
							{{index+1}}、{{data.blog.title}}
						</el-link>
						<h6 style="margin: 10px 30px;">{{data.comment}}</h6>
						<div style="text-align: right;">
							
						</div>
						<div style="display: flex;justify-content: space-between;">
							<span style="text-align：left;font-size: 10px;margin: 10px;">{{data.createTime|moment("YYYY-MM-DD HH:mm")}}</span>
							<el-link style="text-align：right;font-size: 12px;margin: 10px;"><span>--&nbsp;</span>{{data.username}}</el-link>
						</div>
						<hr style="
							width: 100%;
							margin: 10px auto;
							border: 0;
							border-top: 1px solid rgba(0, 0, 0, 0.1);
							border-bottom: 1px solid rgba(255, 255, 255, 0.3);

						"/>
					</div>
				</div>
			</div>
			
          </div></el-col
        >
      </el-row>
    </div>
    <!-- end -->
	<el-backtop></el-backtop>
  </div>
</template>

<script>
let count = 0;
export default {
  methods: {
	Setting(){
		this.$router.push('setting');
	},
	OnSearch(){
		this.axios.get(`http://120.77.213.195:8001/blog/search?key=${this.search}`).then(res=>{
			console.log(res);
			this.blogs = res.data.blogs;
		});
	},
	OnTag(tagname){
		// console.log("标签id："+tagname);
		sessionStorage.setItem("tagName",tagname);
		this.$router.push({ name: 'blogtag'});
	},
	OnCalendar(data) {
		// console.log("点击日历处理");
		// console.log(data);
		sessionStorage.setItem("calendarDay",data);
		this.$router.push({ name: 'blogtimeline' });
	},
	change1(index) {
		this.$refs.on[index].style.display = "inline-block";
		this.$refs.off[index].style.display = "none";
	},
	change2(index) {
		this.$refs.on[index].style.display = "none";
		this.$refs.off[index].style.display = "inline-block";
	},
	onSubmit(blog) {
		// console.log(blog);
		this.$router.push({ name: 'detail', params: { id: blog } });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
	  this.size=val;
	  this.getBlogList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
	  this.currentPage=val;
	  this.getBlogList();
    },
    getBlogList() {
		this.token = sessionStorage.getItem("token");
		this.axios.post(`http://120.77.213.195:8001/blog/listbypage?page=${this.currentPage}&size=${this.size}`).then((response) => {
			// console.log("响应：")
			// console.log(response);
			this.code = response.data.code;
			// console.log(this.$root.loginName);
			var Data = response.data;
			this.blogs = Data.blogs;
			this.total = Data.total;
			this.tags = Data.tags;
			// console.log(response.data);
		});
	},
	getUserMessage(){
		if(this.loginUser != ''){
			this.axios.post(`http://120.77.213.195:8001/user/queryByName?name=${this.loginUser}`).then((response)=>{
				// console.log(response);
				if(response.data.code == 0){
					this.userMessage = response.data.user[0];
				}else if(response.data.code != 0){
					sessionStorage.setItem("loginUser",'');
					this.$router.go(0);
				}
			});
		}
	},
	getLatestComments(){
		if(this.loginUser != ''){
			this.axios.get(`http://120.77.213.195:8001/comment/getLatestComments`).then((response)=>{
				console.log(response);
				if(response.data.code == 0){
					this.latestComments = response.data.latestComments;
				}
			});
		}
	},
  },
  data() {
    return {
      imagesBox: [
        { id: 0, idView: require("../assets/lunbo/4.jpg") },
        { id: 1, idView: require("../assets/lunbo/5.jpg") },
        { id: 2, idView: require("../assets/lunbo/6.jpg") },
      ],
	  circleUrl:
    		"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    //   fiveNews: [],
    //   fits: "scale-down",
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      currentPage: 1, // 分页 当前页
	  size: 3, // 分页  大小
	  total: 0, // 分页  总数
      blogs: [], // 博客
      tags: [], // 标签
	  value: new Date(),
	  token: [], // token验证
	  code: [], // 状态码
	  loginUser: '', // 用户登录名
	  userMessage: [], // 用户信息
	  latestComments: [], // 最新评论
	  search: '',  // 模糊查询
	//   count: 0,
	  markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },
  created() {
	if(this.$route.params.id){
		this.$router.go(0);
	}
	this.loginUser = sessionStorage.getItem("loginUser");
	this.getUserMessage();
	this.getLatestComments();
    this.getBlogList();
  },
};
</script>


<style>
/* .item {
  margin-top: 10px;
  margin-right: 40px;
} */
.el-calendar-table .el-calendar-day{
	height: 30px;
}
.el-calendar__title{
	font-size: smaller;
}
.el-calendar__button-group{
	font: smaller;
}
#tag{
	font-size: xx-small;
	text-align: center;
	height:20px; line-height:20px;
	overflow:hidden;
}
.createtime,.tagname{
	display: inline-block;
}
.tagname{
	font-weight: bolder;
}
a,
a:hover {
  color: #000;
  text-decoration: none;
}

.e {
  display: inline-block;
  border-radius: 4px;
}
/* .el-pagination {
  align-content: center;
  margin: 0 auto;
}
.Pagination {
  align-content: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 14px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #0c51db;
}
.el-divider {
  margin: 0;
  padding: 14px 0 14px 0;
  background: rgb(252, 251, 250);
} */
#blogbody {
  padding: 10px 60px 0 60px;
}
/* .el-carousel__item h3 {
    color: #468ae2;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #c73c92;
	align-content: center;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  } */
.el-header {
  border-radius: 8px;
  background-color: #DCDFE6;
  color: rgb(0, 0, 0);
  text-align: center;
  line-height: 60px;
}
.blog-footer {
  border-radius: 4px;
  background-color: #ffffff;
  color: rgb(15, 15, 15);
  text-align: right;
  line-height: 30px;
  height: 30px;
}

.el-main {
  background-color: #ffffff;
  color: rgb(52, 53, 54);
  text-align: center;
  box-shadow: 0 0 30px #ccccca;
  padding: 5px;
  border-radius: 6px;
  /* line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.blogfor{
	border-radius: 8px;
	background-color: #ffffff;
	color: rgb(41, 41, 41);
	padding: 5px;
	/* box-shadow: 0 0 30px #ccccca; */
	box-shadow: 0 1px 5px 2px rgba(200, 228, 230, 0.5) inset;
}
.tag {
	background-color: #fdfdfd;
	color: #333;
	padding: 15px;
	box-shadow: 0 0 30px #ccccca;
}
.latestComments,
.userMessage{
	
	border-radius: 4px;
	background-color: #fdfdfd;
	color: #333;
	padding: 15px;
	box-shadow: 0 0 30px #ccccca;
}
.commentHeader{
	height: 50px;
	line-height: 50px;
	text-align: center;
	
}
.el-input-group__append{
	background-color: rgb(166, 205, 253);
}
</style>
